<template>
  <div> 
    <div>
      <van-swipe class="!bg-[#39a9ed] !h-[46vh]" :autoplay="3000" indicator-color="white" lazy-render>
        <van-swipe-item class="relative overflow-hidden">
          <van-image width="100%" height="100%" fit="fill" :src="banner1" />
          <div class="z-10 absolute bottom-10 left-6 text-white">
            <div class="text-[12px] font-bold">
             {{ $t('neverStopWelfare') }}
            </div>
            <div class="text-[28px]">
              {{ $t('neverStopWelfare-CN') }}
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-tabs v-model:active="active" class="!mt-2" title-active-color="#1989fa" shrink>
      <van-tab :title="$t('latest')" />
      <van-tab :title="$t('suggest')" />
    </van-tabs>
    <div>
      <div class="bg-[#eef5f5] rounded-lg mx-2 pb-4">
        <img class="w-full h-60 object-fill rounded-t-lg" :src="news">
        <div class="text-center mt-4 mb-10">{{ $t('basicCard.basicNewsTitle') }}</div>
        <div class="mx-4 text-[#989898] text-[14px]">
          2023-11-07 16:54:20	
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import banner1 from "@/assets/images/banner-1.jpg"

import news from "@/assets/images/news-img.jpg"

const active = ref<number>(0)
</script>

<style lang="less" scoped></style>
